
import { Tooltip } from 'antd'

## Getting Started#start-using
import mpPanelImg from '@/assets/image/screenshot/mp-panel.png'

### Step 1#step-1

Install the dependencies in your project. We provide SDKs for multiple mini-program platforms. Please install according to your needs:

:::code-group

```bash wechat
yarn add @huolala-tech/page-spy-wechat@latest
```

```bash alipay
yarn add @huolala-tech/page-spy-alipay@latest
```

```bash uniapp
yarn add @huolala-tech/page-spy-uniapp@latest
```

```bash taro
yarn add @huolala-tech/page-spy-taro@latest
```

:::


### Step 2#step-2

Add the PageSpy service domain to the HTTP and WebSocket request whitelist in the mini-program. Note: Except for the development environment, mini-programs require the use of HTTPS and WSS protocols:

```
https://<your-pagespy-host>
wss://<your-pagespy-host>
```

### Step 3#step-3

Import the SDK in the entry file and instantiate it. You can customize the behavior of the SDK through [configuration](./pagespy#constructor) options:

:::code-group

```js wechat
import PageSpy from '@huolala-tech/page-spy-wechat';

const $pageSpy = new PageSpy({
  api: "{deployPath}",
  enableSSL: {enableSSL},
})
```

```js alipay
import PageSpy from '@huolala-tech/page-spy-alipay';

const $pageSpy = new PageSpy({
  api: "{deployPath}",
  enableSSL: {enableSSL},
})
```

```js uniapp
import PageSpy from '@huolala-tech/page-spy-uniapp';

const $pageSpy = new PageSpy({
  api: "{deployPath}",
  enableSSL: {enableSSL},
})
```

```js taro
import PageSpy from '@huolala-tech/page-spy-taro';
import Taro from '@tarojs/taro';

const $pageSpy = new PageSpy({
  taro: Taro,
  api: "{deployPath}",
  enableSSL: {enableSSL},
})
```

:::

### Debugging panel#debugging

Call the `showPanel()` method on the created PageSpy instance to pop up a debugging menu for assistance with debugging:

<a href={mpPanelImg} target="_blank">
  <img src={mpPanelImg} style={{ maxWidth: 320 }} />
</a>

That's the complete process to integrate PageSpy into a mini-program project.
